import React from 'react';
import {TouchableOpacity, Image, Text, View} from 'react-native';
import PropTypes from 'prop-types';

export default class CheckBox extends React.Component {
    static propTypes = {
        style: PropTypes.object,
        checked: PropTypes.bool,
        color: PropTypes.string,
        activeColor: PropTypes.string,
        size: PropTypes.number,
        title: PropTypes.string,
        titleStyle: PropTypes.object,
        onPress: PropTypes.func,
    };

    static defaultProps = {
        checked: false,
        color: '#bbb',
        activeColor: '#FF4101',
        size: 22,
        onPress: () => null,
    };

    render() {
        let {style, size, color, activeColor, checked, title} = this.props;
        return (
            <TouchableOpacity
                activeOpacity={1}
                style={{
                    flexDirection: 'row',
                    ...style,
                }}
                onPress={this.props.onPress}
            >

                <View style={{justifyContent: 'center'}}>
                    <Image
                        source={checked ? require('./round_check_fill.png') : require('./round.png')}
                        style={{
                            width: size,
                            height: size,
                            tintColor: checked ? activeColor : color,
                        }}
                    />
                </View>
                {
                    title ?
                        <View style={{justifyContent: 'center', marginLeft: 5}}>
                            <Text style={{
                                fontSize: 14,
                                color: '#333',
                                ...this.props.titleStyle,
                            }}>{title}</Text>
                        </View>
                        : null
                }
            </TouchableOpacity>
        );
    }
}
